<template>
  <div class="tool">
      <div class="ab_dubai">
          <ul >
            <li v-for="(item,index) in list" :data-href='item.alias_name' :key="index" @click="view(item.alias_name)">
                <div class="padding">
                    <div class="li-icon"> 
                        <i :class="'fa '+item.icon"></i>
                    </div>
                    <div class="text">
                        <div class="title">
                            <h2>{{item.title}}</h2>
                        </div>
                        <div class="desc"> {{item.remark}}</div>
                    </div>
                </div>
            </li> 
        </ul>
      </div>
      <div class="tool-show" :class="is_show" v-html="tool_show"></div>
  </div>
</template>

<script>
import {getTool} from '@/api/api'

let _this
export default {
  name: 'Tool',
  data () {
    return {
      list:[],
      tool_show:'',
      is_show:'hide',
    }
  },
  created(){
    _this = this;
    _this.getTool()
  },
  methods:{
    getTool() {
      getTool().then((res => {
        _this.list = res.data
        console.log(res)
      })).catch(error => {
        _this.$message({type: 'error', message: '加载失败!', showClose: true})
      })
    },
    view(id){
        console.log(id)
        _this.tool_show = "<div style='height:100%;'><div style='height:100%;' id=\"toolfk-widget\" data-url=\""+id+"\"></div><script type=\"text/javascript\" src=\"/static/js/widget.js\" async=\"async\"><\/script></div><i onclick='closePlayer()' class='fa fa-close tool-close' width='25' height='25'></i>"
        _this.is_show = 'show';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.tool
  width 65%
  padding 0 20px
  box-sizing border-box
  .show
    display block
  .hide
    display none
  .ab_dubai
    padding-top 20px
	width 100%
    ul
		width 90%
		margin 0 auto
        li
            width 23%
            padding 10px
            display inline-block
            vertical-align top
            zoom 1 /* Fix for IE7 */
            *display inline /* Fix for IE7 */
            border 1px solid #999
            box-sizing border-box
            cursor pointer
            margin 5px 10px
            &:hover
                -webkit-transition all .8s
                -moz-transition all .8s
                -ms-transition all .8s
                -o-transition all .8s
                    transition all .8s
                border 1px solid #8e78c9
                border-radius 5px
            .li-icon 
                i
                    font-size 36px
                    text-align center
                    display block
                    color #8e78c9

	
	
</style>
<style type="text/css">
	.tool{
		min-height:750px;
	}
	
	.ab_dubai ul{
		width: 90%;
		margin: 0 auto;
	}
	.ab_dubai li{
		width: 23%;
		padding: 10px;
		display: inline-block;
		vertical-align: top;
		zoom: 1; /* Fix for IE7 */
		*display: inline; /* Fix for IE7 */
		border: 1px solid #999;
		box-sizing: border-box;
		cursor: pointer;
		margin: 5px 10px;
	}
	.ab_dubai li:hover{
		-webkit-transition: all .8s;
		   -moz-transition: all .8s;
		    -ms-transition: all .8s;
		     -o-transition: all .8s;
		        transition: all .8s;
		border: 1px solid #8e78c9;
		border-radius: 5px;
	}
	.ab_dubai .li-icon i{
		font-size: 36px;
		text-align: center;
		display: block;
		color: #8e78c9;
	}
	.ab_dubai .title h2{
		font-size: 16px;
		padding: 5px 0;
		font-weight: 400;
		text-align: center;
	}
	.ab_dubai .desc{
		font-size: 85%;
		font-weight: 300;
		color: #999;
		line-height: 1.75;
		height: 70px;
		overflow: hidden;
	}

	.tool-show{ display:none; border: 1px solid #999; position:fixed; left:0; top:0;  z-index:999; width:100%; height:100%; }
    .tool-close { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; color: #fff;font-size: 36px;color: #999;font-weight: 400;width: 36px;height: 36px;text-align: center;line-height: 36px;-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;}
    .tool-close:hover{
    	transform:rotate(360deg);
		-ms-transform:rotate(360deg); 	/* IE 9 */
		-moz-transform:rotate(360deg); 	/* Firefox */
		-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
		-o-transform:rotate(360deg); 	/* Opera */
    }
</style>